{extend name="layout/base"/}
{block name="content"}
{load href="__BKD__/js/dataLoader.js"/}

<div class="page-content">
    <div style="padding-top: 30px;">
        <form class="ui tiny form" id="q-form">
            <div class="inline fields">
                <label class="form-label"><span style="color:red;">*</span> 试题类型 </label>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="question_type" value="1">
                        <label>选择题</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="question_type" value="2">
                        <label>填空题</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="question_type" value="3">
                        <label>判断题</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="question_type" value="4">
                        <label>简答题</label>
                    </div>
                </div>
            </div>

            <div class="inline field">
                <label class="form-label"><span style="color:red;">*</span> 问题内容</label>
                <div class="form-input" style="display: inline-block">
                    <textarea id="question_body" name="question_body" class="option-editor" rows="4"></textarea>
                </div>
            </div>

            <div class="inline field options-box" id="options-1">
                <label class="form-label"><span style="color:red;">*</span> 选项</label>
                <div class="form-label-right">
                    <button class="ui tiny label" type="button" onclick="optionsCtrl.add()">添加选项</button>
                </div>
                <div class="form-no-label">
                    <table class="ui small very table">
                        <thead>
                        <tr>
                            <th width="40">#</th>
                            <th>内容</th>
                            <th class="right aligned" width="40"></th>
                        </tr>
                        </thead>
                        <tbody id="option-list"></tbody>
                    </table>
                </div>
            </div>

            <div class="inline field">
                <label class="form-label"><span class="options-box-ra" style="color:red;">*</span> 正确答案</label>
                <input type="text" name="right_answer" placeholder="" value="" class="form-input ">
                <div style="font-size: 0.8em" class="form-no-label ">多个用空格隔开；选择题填'a b c'可以小写；判断题写'对'或'错'</div>
            </div>

            <div class="inline field">
                <label class="form-label">关联知识点</label>
                <select name="rel_knowledge[]" multiple="" class="ui search tiny form-input  dropdowner">
                    <option value="">请选择</option>
                    {volist name="knowledge" id="v"}
                    <option value="{$v.id}">{$v.title}</option>
                    {/volist}
                </select>
            </div>
            <div class="inline field">
                <label class="form-label">关联课时</label>
                <select name="rel_section[]" multiple="" class="ui search tiny form-input  dropdowner">
                    <option value="">请选择</option>
                    {volist name="section" id="v"}
                    <option value="{$v.id}">{$v.title}</option>
                    {/volist}
                </select>
            </div>

            <div class="inline field">
                <label class="form-label">设置分类</label>
                <select name="category_id" class="ui tiny dropdown form-input  dropdowner">
                    <option value="">请选择</option>
                    {volist name="category" id="v"}
                    <option value="{$v.id}">{$v._html}{$v.name}</option>
                    {/volist}
                </select>
            </div>

            <div class="inline field">
                <label class="form-label">答题解析</label>
                <div class="form-input " style="display: inline-block">
                    <textarea id="explain" name="explain" class="option-editor" rows="4"></textarea>
                </div>
            </div>

            <input type="hidden" name="id" value="{$Request.param.id}">
            <input type="hidden" name="group_id" value="{$group_id}">
            <div style="text-align: center; margin: 30px;">
                <button id="add-btn" type="button" onclick="doSubmit()" class="ui teal tiny button" style="width: 150px;">
                    保存试题
                </button>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="script"}
{load href="__PLUG__/tinymce/tinymce.min.js"/}
{load href="__BKD__/js/questionEdit.js"/}
<script>
    function getJsonData() {
        return {$data|raw};
    }
    var questionData = getJsonData();
    $(function () {
        if(questionData) loadQuestions();
        else optionsCtrl.add();

        if(typeof questionData != 'undefined') {
            if(questionData.type != 1) {
                $('#options-1').hide();
            }
        }
    });

    function doSubmit() {
        tinyMCE.triggerSave();
        ajaxRequest('{:url("saveQuestion")}', $('#q-form').serialize(), function (res) {
            layer.msg(res.msg, {icon: 1, time: 800}, function (res) {
                var index = parent.layer.getFrameIndex(window.name);
                layer.close(index);
                if('{$group_id}' != '')
                    parent.location.href = "{:url('saveQuestionGroup',['id' => $group_id])}";
                else
                    parent.location.reload();
            });
        }, 'POST');
    }

    function loadQuestions() {
        $('input[name="question_id"]').val(questionData.id)
        $(`:radio[name=question_type][value=${questionData.type}]`).attr('checked','checked');
        $('input[name=right_answer]').val(questionData.answer)
        $("#question_body").val(questionData.body);
        $("#explain").val(questionData.explain);

        var k = [];
        for(var i of questionData.knowledge) {
            k.push(i.id + "");
        }
        $('select[name="rel_knowledge[]"]').dropdown('set selected',k);
        var s = [];
        for(i of questionData.section) {
            s.push(i.id + "");
        }
        $('select[name="rel_section[]"]').dropdown('set selected', s);
        $('select[name="category_id"]').dropdown('set selected', questionData.category_id)

        optionsCtrl.renderList(questionData.opt);

        editorInit('.option-editor');
    }

    // esc关闭窗口
    myKeyBoard.esc(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
</script>
{/block}